import { Link } from '@/src/navigation'
import { useTranslations } from 'next-intl'
import Image from 'next/image'

interface ProductItemProps {
  id: string
  picture: string
  desc: string
  year: string
  manufacturer: string
  model: string
  hours: string
  category: string
  price: string
}

const ProductItem: React.FC<ProductItemProps> = (props) => {
  const {
    id,
    picture,
    desc,
    year,
    manufacturer,
    model,
    hours,
    category,
    price,
  } = props

  const t = useTranslations('products')
  return (
    <Link href={`/product-detail/${id}`}>
      <article className='group border-[1px] border-solid border-[#E8E8E8] hover:border-black transition-colors duration-200'>
        {/* 图片 */}
        <div className='relative w-full aspect-w-[5] aspect-h-[3] lg:aspect-w-[32] lg:aspect-h-[25]'>
          <Image
            src={picture}
            alt='picture'
            fill
            style={{ objectFit: 'cover' }}
            sizes='(max-width: 1024px) 90vw, 25vw'
          />
        </div>
        {/* 内容 */}
        <div>
          <div className='p-[0.8125rem] pb-[1.5625rem] lg:p-[0.9375rem] 2xl:p-[1.40625rem] border-b border-b-[#E8E8E8] group-hover:border-b-black'>
            {/* 标题 */}
            <div className='text-[#333333] text-[1rem] leading-[1.4rem] font-bold lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[1.125rem] 2xl:leading-[1.5rem]'>
              {`${year || 'Unknown'} ${manufacturer || 'Unknown'} ${
                model || 'Unknown'
              } ${category || 'Unknown'}`}
            </div>
            <div className='h-1' />
            {/* 简介 */}
            <div className='line-clamp-2 text-[#666666] text-[0.75rem] leading-[1.0625rem] font-medium lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
              {desc || 'Unknown'}
            </div>
            <div className='h-[0.75rem] lg:h-3 2xl:h-[1.125rem]' />
            {/* 信息列表 */}
            <div className='space-y-3 lg:space-y-2 2xl:space-y-3'>
              <div className='flex justify-between items-center font-medium text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
                <div className='text-[#999999]'>{t('year')}</div>
                <div className='text-[#333333]'>{year || 'Unknown'}</div>
              </div>
              <div className='flex justify-between items-center font-medium text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
                <div className='text-[#999999]'>{t('manufacturer')}</div>
                <div className='text-[#333333]'>
                  {manufacturer || 'Unknown'}
                </div>
              </div>
              <div className='flex justify-between items-center font-medium text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
                <div className='text-[#999999]'>{t('model')}</div>
                <div className='text-[#333333]'>{model || 'Unknown'}</div>
              </div>
              <div className='flex justify-between items-center font-medium text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
                <div className='text-[#999999]'>{t('hours')}</div>
                <div className='text-[#333333]'>{hours || 'Unknown'}</div>
              </div>
              <div className='flex justify-between items-center font-medium text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
                <div className='text-[#999999]'>{t('category')}</div>
                <div className='text-[#333333]'>{category || 'Unknown'}</div>
              </div>
            </div>
          </div>
          <div className='flex justify-center items-center h-[3.625rem] lg:h-[3.125rem] 2xl:h-[4.6875rem] border-b border-b-[#E8E8E8] group-hover:border-b-black'>
            <div className='text-[1rem] leading-[1rem] text-black font-bold lg:text-[1rem] lg:leading-[1rem] 2xl:text-[1.5rem] 2xl:leading-[1.5rem]'>
              {price ? price : t('priceRequiresConsulation')}
            </div>
          </div>
          <div className='flex justify-center items-center h-[3.625rem] lg:h-[2.25rem] 2xl:h-[3.375rem] group-hover:bg-black group-hover:text-white'>
            <div className='text-[0.875rem] leading-[1rem] font-medium lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[1.125rem] 2xl:leading-[1.5rem]'>
              {t('oneClickConsulation')}
            </div>
          </div>
        </div>
      </article>
    </Link>
  )
}

export default ProductItem
